<template>
  <div>
    <br /><br /><br /><br />
    <center>
      <div>
        <el-button
          type="primary"
          @click="opendialog(1)"
          icon="el-icon-circle-plus-outline"
          >添加主题</el-button
        >
        <el-button type="primary" @click="findBackground" icon="el-icon-picture"
          >更换主页照片</el-button
        >
        <br /><br />
        <!-- <el-button type="danger" @click="delByIds()" icon="el-icon-delete">批量删除</el-button> -->
      </div>
    </center>
    <br />
    <center>
      <div>
        <el-table
          :data="themeList"
          stripe
          border
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="80" align="center">
            </el-table-column> -->
          <el-table-column
            prop="title"
            label="主题名称"
            width="300"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="englishTitle"
            label="主题英文名"
            width="300"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="order" width="160" align="center">
            <template slot="header">
              <div>
                <span>主题排序</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="数字越小越靠左"
                  placement="top"
                >
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="albumCount"
            label="包含相册数量"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column label="是否展示" width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.status == 1 ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row.id)"
                type="primary"
                plain
                >编辑</el-button
              >
              <!-- <el-button
                size="mini"
                type="danger"
                @click="delById(scope.row.id)"
                >删除</el-button
              > -->
              <el-button
                size="mini"
                @click="updateStatus(scope.row.id, scope.row.status)"
                :type="scope.row.status == 1 ? 'info' : 'success'"
              >
                {{ scope.row.status == 1 ? "不展示" : "展示" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </center>
    <!-- <div style="width: 500px"><br /></div> -->
    <center>
      <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="totalCount"
        >
        </el-pagination>
      </div>
    </center>
    <div>
      <el-dialog
        class="theme-dialog"
        :title="title"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        width="30%"
        :top="dialogTop"
      >
        <el-form ref="form" :model="theme" label-width="80px">
          <el-form-item label="主题名称">
            <el-input
              v-model="theme.title"
              placeholder="请输入主题名称"
              style="width: 250px"
              @blur="handleBlur1"
            ></el-input>
            <el-form-item>
              <span style="color: red">{{ errorMessage }}</span>
            </el-form-item>
          </el-form-item>
          <el-form-item label="英文名称">
            <el-input
              v-model="theme.englishTitle"
              placeholder="请输入主题英文名"
              style="width: 250px"
              @blur="handleBlur2"
            ></el-input>
            <el-form-item>
              <span style="color: red">{{ englishErrorMsg }}</span>
            </el-form-item>
          </el-form-item>
          <el-form-item label="主题排序">
            <el-input
              v-model="theme.order"
              placeholder="数字越小越靠左"
              style="width: 250px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" icon="el-icon-close"
            >取 消</el-button
          >
          <el-button type="primary" @click="saveOrUpdate()" icon="el-icon-check"
            >提 交</el-button
          >
        </div>
      </el-dialog>
      <el-dialog
        class="album-dialog"
        title="修改主页背景照片"
        :visible.sync="uploadDialog"
        width="30%"
        top="100px"
      >
        <el-form ref="form" :model="background" label-width="80px">
          <el-form-item label="主页背景">
            <!-- 使用 el-upload 组件替换 -->
            <el-upload
              class="avatar-uploader"
              :action="uploadCoverUrl()"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img
                v-if="background.url"
                :src="background.url"
                class="avatar"
                style="width: 300px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div
                slot="tip"
                class="el-upload__tip"
                style="margin-top: -20px; margin-bottom: -20px"
              >
                点击图片上传一张横版照片更换主页背景,上传成功后记得提交
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: 50px">
          <el-button @click="dialogFormVisible = false" icon="el-icon-close"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="saveBackground()"
            icon="el-icon-check"
            >提 交</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>
  
  <script>
import { themeApi, backgroundApi } from "@/api/api";
export default {
  data() {
    return {
      //当前页数
      currentPage: 1,
      //每页显示多少条
      pageSize: 10,
      //总计条数
      totalCount: 0,
      //表的数据
      themeList: [],
      //同名相册错误提示
      errorMessage: "",
      //控制是否显示表单弹框
      dialogFormVisible: false,
      //添加和修改的表单数据
      theme: {
        title: "",
        englishTitle: "",
        order: "",
      },
      //选择的id
      ids: [],
      //表单标题
      title: "",
      //保存还是修改,1保存,0修改
      saveFlag: "",
      //弹窗上面距离
      dialogTop: "",
      //表单主题英文错误提示
      englishErrorMsg: "",
      // 更换主页照片弹窗
      uploadDialog: false,
      background: {
        url: "",
      },
    };
  },
  methods: {
    // 修改主页背景
    saveBackground() {
      backgroundApi.changeBackground(this.background).then((resp) => {
        if (resp.data.code) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          this.uploadDialog = false;
        } else {
          this.errorMessage = resp.data.msg;
        }
      });
    },
    // 更换主页背景弹窗
    findBackground() {
      this.uploadDialog = true;
      backgroundApi.findById().then((resp) => {
        if (resp.data.code) {
          this.background = resp.data.data;
        } else {
          this.errorMessage = resp.data.msg;
        }
      });
    },
    //上传主页背景路径
    uploadCoverUrl: function () {
      return process.env.VUE_APP_BACKEND_URL + "/upload/background";
    },
    // 上传成功执行逻辑
    handleAvatarSuccess(res, file) {
      this.$message({
        type: "success",
        message: "上传成功",
      });
      this.$set(this.background, "url", res.data);
    },
    //主题弹框验证主题名称
    handleBlur1() {
      console.log(this.theme.title);
      if (this.theme.title == "" || this.theme.title == undefined) {
        this.errorMessage = "请输入主题名称";
      } else {
        this.errorMessage = "";
        themeApi.sameThemeName(this.theme).then((resp) => {
          if (resp.data.code) {
            this.errorMessage = "";
          } else {
            this.errorMessage = resp.data.msg;
          }
        });
      }
    },
    // 修改主题状态
    updateStatus(id, status) {
      //根据现在的状态更换要修改的状态
      const changeStatus = status == 1 ? 0 : 1;
      themeApi.updateStatus(id, changeStatus).then((resp) => {
        if (resp.data.code) {
          this.$message({
            type: "success",
            message: "修改状态成功",
          });
          this.queryPage();
        } else {
          this.$message({
            type: "info",
            message: resp.data.msg,
          });
        }
      });
    },
    //没填英文名提示
    handleBlur2() {
      console.log(this.theme.englishTitle);
      if (
        this.theme.englishTitle == "" ||
        this.theme.englishTitle == undefined
      ) {
        this.englishErrorMsg = "请输入主题英文名";
      } else {
        this.englishErrorMsg = "";
      }
    },
    //点击页码切换分页数据
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryPage();
    },
    //点击编辑主题信息逻辑
    handleEdit(id) {
      this.opendialog(0);
      themeApi.queryById(id).then((resp) => {
        if (resp.data.code) {
          this.theme = resp.data.data;
        } else {
          this.$message({
            type: "info",
            message: resp.data.msg,
          });
        }
      });
    },
    saveOrUpdate() {
      if (!this.errorMessage == "") {
        this.$message({
          type: "warning",
          message: "请检查主题名称",
        });
      } else if (!this.englishErrorMsg == "") {
        this.$message({
          type: "warning",
          message: "请检查主题英文名",
        });
      } else {
        if (this.saveFlag) {
          themeApi.addTheme(this.theme).then((resp) => {
            if (resp.data.code) {
              this.$message({
                type: "success",
                message: "添加主题成功",
              });
              this.dialogFormVisible = false;
              this.queryPage();
            } else {
              this.$message({
                type: "info",
                message: resp.data.msg,
              });
            }
          });
        } else {
          themeApi.updateTheme(this.theme).then((resp) => {
            if (resp.data.code) {
              this.$message({
                type: "success",
                message: "更新主题成功",
              });
              this.dialogFormVisible = false;
              this.queryPage();
            } else {
              this.$message({
                type: "info",
                message: resp.data.msg,
              });
            }
          });
        }
      }
    },
    //弹出添加或者修改的表单
    opendialog(flag) {
      //flag == 1 添加表单  flag == 0 修改表单
      this.saveFlag = flag;
      this.dialogTop = "200px";
      if (flag) {
        this.theme = {};
        this.errorMessage = "";
        this.englishErrorMsg = "";
        this.title = "添加新主题";
      } else {
        this.title = "修改主题信息";
      }
      //打开表单
      this.dialogFormVisible = true;
    },
    handleSelectionChange(val) {
      this.ids = [];
      for (let i = 0; i < val.length; i++) {
        this.ids[i] = val[i].id;
      }
    },

    //分页查询
    queryPage() {
      themeApi.queryPage(this.currentPage, this.pageSize).then((resp) => {
        if (resp.data.code) {
          this.themeList = resp.data.data.records;
          this.totalCount = resp.data.data.total;
        } else {
          this.$message({
            type: "info",
            message: resp.data.msg,
          });
        }
      });
    },
    //删除主题
    delById(id) {
      this.$confirm("此操作将永久删除该主题, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          themeApi.deleteById(id).then((resp) => {
            if (resp.data.code) {
              this.$message({
                type: "success",
                message: "删除主题成功",
              });
              this.queryPage();
            } else {
              this.$message({
                type: "info",
                message: resp.data.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.queryPage();
  },
};
</script>
  
  <style>
.page {
  margin-top: 20px;
}

.el-table td,
.el-table th {
  user-select: none;
}

/* 相册新增弹框调整 */
.theme-dialog .el-dialog__body {
  padding: 30px 20px 0px 20px !important;
}

.theme-dialog .el-dialog__footer {
  padding: 0px 50px 30px 20px !important;
}

.custom-dialog {
  background-color: rgba(255, 255, 255, 0.7);
}

/* 上传封面组件样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>